<template>
  <div class="goods">
    <div class="header">
      <el-input v-model="input" @change="searchInput" placeholder="请输入内容"></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="addGoods">添加</el-button>
      <el-button type="primary" @click="exportData" size="small">导出表格</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData" border :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="商品ID" width="80"> </el-table-column>
        <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="price" sortable label="价格" width="80"> </el-table-column>
        <el-table-column prop="num" sortable label="数量" width="80"> </el-table-column>
        <el-table-column prop="category" label="规格类目" width="100"> </el-table-column>
        <el-table-column prop="image" label="商品图片" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="descs" label="商品描述" show-overflow-tooltip> </el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleClick(scope.$index, scope.row)"
              >看图</el-button
            >
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MyPagination
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @changePage="changePage"
    />

    <GoodsDialog ref="dialog" :title="title" :rowData="rowData" />
  </div>
</template>

<script>
import MyPagination from '../../components/MyPagination.vue'
import GoodsDialog from './GoodsDialog.vue'
import { export2Excel } from '../../common/js/util'
export default {
  components: {
    MyPagination,
    GoodsDialog
  },
  data() {
    return {
      input: '',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,
      list: [],
      dialogVisible: false,
      currentPage: 1,
      title: '添加商品',
      rowData: {},
      columns: [
        // 定义表头
        { title: '商品名称', key: 'title' },
        { title: '商品价格', key: 'price' },
        { title: '商品数量', key: 'num' },
        { title: '商品卖点', key: 'sellPoint' },
        { title: '商品图片', key: 'image' },
        { title: '商品描述', key: 'descs' }
      ]
    }
  },
  methods: {
    addGoods() {
      this.$refs.dialog.dialogVisible = true
      this.title = '添加商品'
    },

    handleEdit(index, row) {
      this.$refs.dialog.dialogVisible = true
      this.title = '编辑商品'
      this.rowData = { ...row }
    },

    // 新窗口打开
    handleClick(index, row) {
      let url = row.image
      if (url) {
        let newWindow = window.open(url)
        setTimeout(function () {
          newWindow.close()
        }, 4000)
      } else {
        this.$message({
          type: 'info',
          message: '暂无图片'
        })
      }
    },

    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api
            .deleteGoods({
              id: row.id
            })
            .then((res) => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.http(1)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 导出表格
    exportData() {
      export2Excel(this.columns, this.tableData, '商品列表')
    },

    // 商品搜索
    searchInput(value) {
      if (!value) {
        this.http(1)
        this.currentPage = 1
        this.type = 1
        return
      }
      this.$api
        .getSearch({
          search: value
        })
        .then((res) => {
          this.currentPage = 1
          this.list = res.data.length
          if (res.data.status === 200) {
            this.list = res.data.result
            this.total = res.data.result.length
            this.pageSize = 3
            this.tableData = res.data.result.slice(0, 3)
            this.type = 2
          } else {
            this.tableData = []
            this.total = 1
            this.pageSize = 1
            this.type = 1
          }
        })
    },

    // 分页页码
    changePage(num) {
      this.currentPage = num
      if (this.type == 1) {
        this.http(num)
      } else {
        this.tableData = this.list.slice((num - 1) * 3, num * 3)
      }
    },
    //  商品列表获取

    http(page) {
      this.$api
        .getGoodsList({
          page
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.tableData = res.data.data
            this.total = res.data.total
            this.pageSize = res.data.pageSize
          }
        })
    }
  },
  created() {
    this.http()
  }
}
</script>

<style lang="less" scoped>
.goods {
  margin: 10px;
}
.header {
  display: flex;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  .el-button {
    margin-left: 15px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
.wrapper {
  margin: 10px 0;
}
</style>
